<template>
    <div class="container">
        <el-card v-model="classInfo" class="classinfo">
            <template #header>
                <span style="font-size: 24px;">
                    {{ classInfo.className }}
                </span>
            </template>
            <el-row>
                <el-col :span="12">
                    <div class="statistic-card">
                        <el-statistic :value="classInfo.integral">
                            <template #title>
                                我的积分
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="statistic-card">
                        <el-statistic :value="classInfo.workCompletion" :precision="1">
                            <template #title>
                                作业完成率
                            </template>
                            <template #suffix>
                                %
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin-top: 30px;">
                <el-col :span="12">
                    <div class="statistic-card">
                        <el-statistic :value="classInfo.rank">
                            <template #title>
                                班级排名
                            </template>
                            <template #suffix>
                                /{{ classInfo.total }}
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-card style="width: 500px;" shadow="never">
                        <template #header>
                            班级公告
                        </template>
                        {{ classNotice }}
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
const classInfo = {
    className: "软件工程2班",
    integral: 1200,
    workCompletion: 100,
    rank: 1,
    total: 106,
}

const classNotice = "这是软件工程2班的班级公告"
</script>

<style scoped>
.container {
    padding: 20px 0;
}

.classinfo {
    margin-top: 20px;
}
</style>